<template>
    <div class="container">
        <div class="bill-header">
            <div class="billheader">
                <router-link tag="span" to="/mi">&lt;</router-link>
                <h3>我的长租账单</h3>
            </div>

        </div>
        <div class="bill-main">
            <div class="tops">
                <p :class="{ 'con': flag }" @click="flag = true">待支付</p>
                <p :class="{ 'con': !flag }" @click="flag = false">已支付</p>
            </div>
            <div class="bottoms">
                <div class="content" :class="{ 'active': !flag }">
                    <div class="bill-carbox"  v-for="item in billing" :key="item.carid" >
                        <div class="cars">
                            <div class="car">
                                <div class="imgs">
                                    <img :src="item.carimg"  alt="">
                                    <em>
                                        <img src="../assets/img/aixinchezhu_list.png" alt="">
                                    </em>
                                </div>
                                <div class="content">
                                    <h1 >
                                        <span >{{item.carname}}</span>
                                        <em></em>
                                    </h1>
                                    <div class="plate">
                                        <span>{{item.plate}}</span>
                                        <span>9.1</span>
                                    </div>
                                    <div class="divide">5.0分</div>
                                    <div class="ticket"  >
                                        <p >{{item.money}}元</p>
                                        <button @click="add(item.carid)" >确认支付</button>
                                    </div>

                                </div>

                            </div>
                           

                        </div>
                    </div>

                </div>

                <div class="content" :class="{ 'active': flag }">
                    <div class="bill-carbox"  v-for="item in yizifu" :key="item.carid">
                        <div class="cars" v-if="yizifu">


                            <div class="car">
                                <div class="imgs">
                                    <img :src="item.carimg" alt="">
                                    <em>
                                        <img src="../assets/img/aixinchezhu_list.png" alt="">
                                    </em>
                                </div>
                                <div class="content">
                                    <h1>
                                        <span>{{item.carname}}</span>
                                        <em></em>
                                    </h1>
                                    <div class="plate">
                                        <span>{{item.plate}}</span>
                                        <span>9.1</span>
                                    </div>
                                    <div class="divide">5.0分</div>
                                    <div class="ticket">
                                        <p>{{item.money}}元</p>
                                        <button>已支付</button>
                                    </div>

                                </div>

                            </div>
                            <div class="buttoms">
                                
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { getLoveCar } from '@/api/lovecar'
export default {
    data() {
        return {
            flag: true,
            bill:null,
            billing:null,
            // isShow:true,
            yizifu:[]
        }
    },
    methods: {
        add(id){
        //    this.isShow = false;
           console.log(this.billing);
           let index = this.billing.findIndex(item => item.carid == id)
           this.yizifu.unshift(this.billing[index])
           localStorage.setItem("zhifu",JSON.stringify(this.yizifu))


           this.billing.splice(index,1)
           localStorage.setItem('tijiao',JSON.stringify(this.billing))
           this.$toast("支付成功")
        }

    },
    created() {
        getLoveCar().then(data=>{
            this.bill = data.lovecar
        })
        if(localStorage.tijiao){
            this.billing = JSON.parse(localStorage.getItem("tijiao"))
            console.log(this.billing);
        }
        if(localStorage.zhifu){
            this.yizifu = JSON.parse(localStorage.getItem("zhifu"))
            
        }
        

    }
}
</script>

<style lang="scss" scoped>
.bill-header {
    width: 100%;
    height: 55px;
    line-height: 55px;

    .billheader {
        width: 90%;
        margin: 0 auto;

        span {
            float: left;
            font-size: 20px;
            font-family: "仿宋";
            font-weight: 600;
        }

        h3 {
            font-weight: 400;
            text-align: center;
        }
    }

}

.bill-main {
    width: 100%;

    .tops {
        display: flex;
        justify-content: space-evenly;

        p {
            position: relative;

        }

        .con::after {
            content: "";
            display: block;
            height: 2px;
            width: 20px;
            background-color: #04bd94;
            position: absolute;
            bottom: -15px;
            left: 15px;
        }
    }

    .bottoms {

        background-color: #f5f5f5;
        margin-top: 15px;


        .content {
            // display: flex;
            // flex-direction: column;

            // align-items: center;
            // padding: 245px 0;
            .bill-carbox {
                width: 100%;
                background-color: #ebebeb;
                display: inline-block;
                margin-bottom: 10px;
                .cars {
                    width: 90%;
                    margin: 0 auto;

                    .car {
                        width: 100%;
                        height: 130px;
                        margin-top: 10px;
                        background-color: #fff;
                        border-radius: 3px;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;

                        .imgs {
                            width: 150px;
                            height: 110px;
                            position: relative;

                            img {
                                width: 100%;
                                height: 100%;
                                border-top-left-radius: 5px;
                            }

                            em {
                                &>img {
                                    width: 47px;
                                    height: 15px;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                }
                            }
                        }

                        .content {
                            width: 150px;
                            height: 110px;
                            display: flex;
                            flex-direction: column;

                            h1 {
                                font-size: 14px;
                                font-weight: 400;
                                display: flex;
                                margin-top: 8px;

                                em {
                                    width: 17px;
                                    height: 17px;
                                    background: url("../assets/img/zi.png");
                                    background-size: 100% 100%;
                                    margin-top: 2px;
                                    margin-left: 5px;
                                }
                            }

                            .plate {
                                font-size: 10px;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 8px;

                                span {
                                    &:nth-child(2) {
                                        margin-right: 10px;
                                    }
                                }
                            }

                            .divide {
                                font-size: 10px;
                                color: #ffa41c;
                                margin-top: 12px;
                            }

                            .ticket {
                                font-size: 12px;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 8px;
                                align-items: center;

                                p {
                                    // font-weight: 600;
                                    font-size: 16px;
                                    color: red;

                                }
                                button{
                                    height: 20px;
                                    width: 50px;
                                    border: none;
                                    color: red;
                                    background-color: #fff;
                                    
                                }
                            }
                        }
                    }
                }
            }

           
        }

        .active {
            display: none;
        }

    }

}
</style>